<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title> &lt;project name&gt;test report </title>
    <meta name="generator" content="HTMLTestRunner 1.1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://img.itest.info/seldom.css">

    <style type="text/css" media="screen">
    body {
        font-family: verdana, arial, helvetica, sans-serif;
        font-size: 80%;
    }

    table {
        font-size: 100%;
    }

    /* -- heading ---------------------------------------------------------------------- */
    h1 {
        font-size: 16pt;
        color: gray;
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: rgba(114,124,245,.25);
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #6c757d;
    }

    .heading {
        margin-top: 20px;
        margin-bottom: 1ex;
        margin-left: 10px;
        margin-right: 10px;
        width: 23%;
        float: left;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        box-shadow: 0px 0px 5px #000;
    }

    .heading .attribute {
        margin-top: 1ex;
        margin-bottom: 0;
    }

    .heading .description {
        margin-top: 4ex;
        margin-bottom: 6ex;
    }

    /* -- css div popup ------------------------------------------------------------------------ */

    a.popup_link:hover {
        color: red;
    }

    .popup_window {
        display: none;
        position: relative;
        left: 0px;
        top: 0px;
        /*border: solid #627173 1px; */
        font-family: "Lucida Console", "Courier New", Courier, monospace;
        text-align: left;
        font-size: 12pt;
        width: 500px;
    }

    /* -- report ------------------------------------------------------------------------ */
    pre {
        background-color: #eef2f7;
        box-shadow: 0px 0px 1px inset;
        padding-top: 10px;
    }
    .show_detail_line {
        margin-left: 10px;
        margin-top: 30px;
        margin-bottom: 60px;
    }

    .show_detail_button {
        margin-top: 3ex;
        margin-bottom: 1ex;
        margin-left: 10px;
        text-align: right;
        margin-right: 15px;
    }

    #header_row {
        font-weight: bold;
        color: #606060;
        border-top-width: 10px;
        border-color: #d6e9c6;
        font-size: 15px;
    }

    #total_row {
        font-weight: bold;
        background-color: #dee2e6;
    }

    .passClass {
        background-color: #d6e9c6;
    }

    .failClass {
        background-color: #faebcc;
    }

    .errorClass {
        background-color: #ebccd1;
    }

    .passCase {
        color: #28a745;
        font-weight: bold;
    }

    .failCase {
        color: #c60;
        font-weight: bold;
    }

    .errorCase {
        color: #c00;
        font-weight: bold;
    }

    .hiddenRow {
        display: none;
    }

    .none {
        color: #009900
    }

    .testcase {
        margin-left: 2em;
    }

    /* -- chars ---------------------------------------------------------------------- */
    .testChars {
        width: 900px;
        margin-left: 0px;
    }

    .error-color {
        color: #fff;
        background-color: #f44455;
        border-color: #f44455;
    }

    .pass-color {
        color: #fff;
        background-color: #5fc27e;
        border-color: #5fc27e;
    }

    .fail-color {
        color: #fff;
        background-color: #fcc100;
        border-color: #fcc100;
    }

    .skip-color {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    /* -- screenshots ---------------------------------------------------------------------- */
    .img {
        height: 100%;
        border-collapse: collapse;
    }

    .screenshots {
        z-index: 100;
        position: fixed;
        height: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        box-shadow: 1px 2px 20px #333333;
    }

    .imgyuan {
        height: 20px;
        border-radius: 12px;
        background-color: red;
        padding-left: 13px;
        margin: 0 auto;
        position: relative;
        top: -40px;
        background-color: rgba(1, 150, 0, 0.3);
    }

    .imgyuan font {
        border: 1px solid white;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        margin-right: 9px;
        margin-top: 4px;
        display: block;
        float: left;
        background-color: white;
    }

    .close_shots {
        background-image: url();
        background-size: 22px 22px;
        -moz-background-size: 22px 22px;
        background-repeat: no-repeat;
        position: absolute;
        top: 5px;
        right: 5px;
        height: 22px;
        z-index: 99;
        width: 22px;
        box-shadow: 1px 2px 5px #333333;
    }

    .footer {
        height: 50px;
        width: 100%;
        position: fixed;
        bottom: 0;
    }
    
    @media screen and (max-width:1000px){
        #parentContainer{
            padding-bottom:300px
        };
    }

    @media screen and (min-width:1000px){
        #parentContainer{
            padding-bottom:100px
        };
    }
</style>
</head>

<body>
    <script language="javascript" type="text/javascript">

        function show_img(obj) {
            var obj1 = obj.nextElementSibling
            obj1.style.display = 'block'
            var index = 0; //每张图片的下标，
            var len = obj1.getElementsByTagName('img').length;
            var imgyuan = obj1.getElementsByClassName('imgyuan')[0]
            //var start=setInterval(autoPlay,500);
            obj1.onmouseover = function () { //当鼠标光标停在图片上，则停止轮播
                clearInterval(start);
            }
            obj1.onmouseout = function () { //当鼠标光标停在图片上，则开始轮播
                start = setInterval(autoPlay, 1000);
            }
            for (var i = 0; i < len; i++) {
                var font = document.createElement('font')
                imgyuan.appendChild(font)
            }
            var lis = obj1.getElementsByTagName('font'); //得到所有圆圈
            changeImg(0)
            var funny = function (i) {
                lis[i].onmouseover = function () {
                    index = i
                    changeImg(i)
                }
            }
            for (var i = 0; i < lis.length; i++) {
                funny(i);
            }

            function autoPlay() {
                if (index > len - 1) {
                    index = 0;
                    clearInterval(start); //运行一轮后停止
                }
                changeImg(index++);
            }
            imgyuan.style.width = 25 * len + "px";
            //对应圆圈和图片同步
            function changeImg(index) {
                var list = obj1.getElementsByTagName('img');
                var list1 = obj1.getElementsByTagName('font');
                for (i = 0; i < list.length; i++) {
                    list[i].style.display = 'none';
                    list1[i].style.backgroundColor = 'white';
                }
                list[index].style.display = 'block';
                list1[index].style.backgroundColor = 'red';
            }
        }

        function hide_img(obj) {
            obj.parentElement.style.display = "none";
            obj.parentElement.getElementsByClassName('imgyuan')[0].innerHTML = "";
        }

        output_list = Array();
        /* level 
        - 0:Summary; 
        - 1:Failed; 
        - 2:Skip; 
        - 3:All 
        */
        function showCase(level, channel) {
            trs = document.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                tr = trs[i];
                id = tr.id;
                if (["ft", "pt", "et", "st"].indexOf(id.substr(0, 2)) != -1) {
                    if (level == 0 && id.substr(2, 1) == channel) {
                        tr.className = 'hiddenRow';
                    }
                }
                if (id.substr(0, 3) == 'pt' + channel) {
                    if (level == 1) {
                        tr.className = '';
                    }
                    else if (level > 4 && id.substr(2, 1) == channel) {
                        tr.className = '';
                    }
                    else {
                        tr.className = 'hiddenRow';
                    }
                }
                if (id.substr(0, 3) == 'ft' + channel) {
                    if (level == 2) {
                        tr.className = '';
                    }
                    else if (level > 4 && id.substr(2, 1) == channel) {
                        tr.className = '';
                    }
                    else {
                        tr.className = 'hiddenRow';
                    }
                }
                if (id.substr(0, 3) == 'et' + channel) {
                    if (level == 3) {
                        tr.className = '';
                    }
                    else if (level > 4 && id.substr(2, 1) == channel) {
                        tr.className = '';
                    }
                    else {
                        tr.className = 'hiddenRow';
                    }
                }
                if (id.substr(0, 3) == 'st' + channel) {
                    if (level == 4) {
                        tr.className = '';
                    }
                    else if (level > 4 && id.substr(2, 1) == channel) {
                        tr.className = '';
                    }
                    else {
                        tr.className = 'hiddenRow';
                    }
                }
            }
        }
        function showClassDetail(cid, count) {
            var id_list = Array(count);
            var toHide = 1;
            for (var i = 0; i < count; i++) {
                tid0 = 't' + cid.substr(1) + '.' + (i + 1);
                tid = 'f' + tid0;
                tr = document.getElementById(tid);
                if (!tr) {
                    tid = 'p' + tid0;
                    tr = document.getElementById(tid);
                }
                if (!tr) {
                    tid = 'e' + tid0;
                    tr = document.getElementById(tid);
                }
                if (!tr) {
                    tid = 's' + tid0;
                    tr = document.getElementById(tid);
                }
                id_list[i] = tid;
                if (tr.className) {
                    toHide = 0;
                }
            }
            for (var i = 0; i < count; i++) {
                tid = id_list[i];
                if (toHide) {
                    document.getElementById(tid).className = 'hiddenRow';
                }
                else {
                    document.getElementById(tid).className = '';
                }
            }
        }
        function showTestDetail(div_id) {
            var details_div = document.getElementById(div_id)
            var displayState = details_div.style.display

            if (displayState != 'block') {
                displayState = 'block'
                details_div.style.display = 'block'
            }
            else {
                details_div.style.display = 'none'
            }
        }
        function html_escape(s) {
            s = s.replace(/&/g, '&amp;');
            s = s.replace(/</g, '&lt;');
            s = s.replace(/>/g, '&gt;');
            return s;
        }
    </script>

    <nav class="navbar navbar-expand navbar-light bg-dark">
    <a class="sidebar-toggle d-flex mr-2">
        <i class="hamburger align-self-center"></i>
    </a>
    <h1 style="margin-bottom: 0px; color: azure;">seldom</h1>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav ml-auto">
            <h3 style="float: right; color: azure;"> <project name>test report</h3>
        </ul>
    </div>
</nav>

<div id="parentContainer" class="container-fluid mm-active" style="padding-left: 35px;padding-right: 35px;">
    <div style="height: 260px; margin-top: 20px;">
        
        <div class="row" style="margin-left: 0px; margin-right: 0px;">
            <div class="col-12 col-lg-5 col-xl-3 d-flex" style="float:left">
                <div class='card flex-fill'>
                    <div class="card-body my-2">
                        <h4 class="header-title">Overview</h4>
                        <table class="table my-0">
                            <tbody>
                                
                                <tr>
                                    <td> Start Time</td>
                                    <td class="text-right">2021-11-03 15:23:24</td>
                                </tr>
                                
                                <tr>
                                    <td> Duration</td>
                                    <td class="text-right">0:00:00.000675</td>
                                </tr>
                                
                                <tr>
                                    <td> Status</td>
                                    <td class="text-right">Passed:2 Failed:2 Errors:1 Skipped:1</td>
                                </tr>
                                
                                <tr>
                                    <td>Description:</td>
                                    <td class="text-right">describe: ... </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 order-lg-1">
                <div class="card-body">
                    <div class="testChars" style="width: 230px; height: 200px;">
                        <canvas id="myChart" width="250" height="250"></canvas>
                    </div>
                </div> 
            </div>

        </div>
    </div>
</div>
    <div class="show_detail_line">
    <p class="show_detail_button">
        <a href='javascript:showCase(0, 1)' class="btn btn-dark btn-sm">Summary</a>
        <a href='javascript:showCase(1, 1)' class="btn btn-success btn-sm">Pass</a>
        <a href='javascript:showCase(2, 1)' class="btn btn-warning btn-sm">Failed</a>
        <a href='javascript:showCase(3, 1)' class="btn btn-danger btn-sm">Error</a>
        <a href='javascript:showCase(4, 1)' class="btn btn-secondary btn-sm">Skip</a>
        <a href='javascript:showCase(5, 1)' class="btn btn-info btn-sm">All</a>
    </p>
</div>

<div class="col-12 d-flex">
    <div class='card flex-fill'  style="bottom: 50px;">
        <div class="card-body my-2">
            <h4 class="header-title">Result</h4>
            <table class="table mb-0">
                <thead>
                    <tr id='header_row'>
                        <td>Test Group/Test case</td>
                        <td>description</td>
                        <td>Duration</td>
                        <td>Count</td>
                        <td>Pass</td>
                        <td>Fail</td>
                        <td>Error</td>
                        <td>View</td>
                        <td>Screenshots</td>
                    </tr>
                </thead>
                
<tr class='errorClass'>
    <td>TestDemo</td>
    <td>测试用例说明</td>
    <td></td>
    <td>3</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td><a href="javascript:showClassDetail('c1.1',3)">Detail</a></td>
    <td>&nbsp;</td>
</tr>

<tr id='pt1.1.1' class='hiddenRow'>
    <td class='passCase'>
        <div class='testcase'>test_success</div>
    </td>
    <td style="color: #495057">
        <div>执行成功</div>
    </td>
    <td style="color: #495057">
        <div>0.00 s</div>
    </td>
    <td colspan='5' align='center'>pass</td>
    <td></td>
</tr>

<tr id='st1.1.2' class='none'>
    <td class='passCase'>
        <div class='testcase'>test_skip</div>
    </td>
    <td style="color: #495057">
        <div></div>
    </td>
    <td style="color: #495057">
        <div>0.00 s</div>
    </td>
    <td colspan='5' align='center'>
    <!--css div popup start-->
    <a class="popup_link" onfocus='this.blur();' href="javascript:showTestDetail('div_st1.1.2')" >
        skip</a>
    <div id='div_st1.1.2' class="popup_window">
        <div style='text-align: right; color:red;cursor:pointer'>
        <a onfocus='this.blur();' onclick="document.getElementById('div_st1.1.2').style.display = 'none' " >
           [x]</a>
        </div>
        <pre>
        st1.1.2: skip case
        </pre>
    </div>
    <!--css div popup end-->
    </td>
    <td></td>
</tr>

<tr id='ft1.1.3' class='none'>
    <td class='failCase'>
        <div class='testcase'>test_fail</div>
    </td>
    <td style="color: #495057">
        <div></div>
    </td>
    <td style="color: #495057">
        <div>0.00 s</div>
    </td>
    <td colspan='5' align='center'>
    <!--css div popup start-->
    <a class="popup_link" onfocus='this.blur();' href="javascript:showTestDetail('div_ft1.1.3')" >
        fail</a>
    <div id='div_ft1.1.3' class="popup_window">
        <div style='text-align: right; color:red;cursor:pointer'>
        <a onfocus='this.blur();' onclick="document.getElementById('div_ft1.1.3').style.display = 'none' " >
           [x]</a>
        </div>
        <pre>
        ft1.1.3: Traceback (most recent call last):
  File "test.py", line 17, in test_fail
    self.assertEqual(5, 6)
AssertionError: 5 != 6

        </pre>
    </div>
    <!--css div popup end-->
    </td>
    <td></td>
</tr>

<tr id='et1.1.4' class='none'>
    <td class='errorCase'>
        <div class='testcase'>test_error</div>
    </td>
    <td style="color: #495057">
        <div></div>
    </td>
    <td style="color: #495057">
        <div>0.00 s</div>
    </td>
    <td colspan='5' align='center'>
    <!--css div popup start-->
    <a class="popup_link" onfocus='this.blur();' href="javascript:showTestDetail('div_et1.1.4')" >
        error</a>
    <div id='div_et1.1.4' class="popup_window">
        <div style='text-align: right; color:red;cursor:pointer'>
        <a onfocus='this.blur();' onclick="document.getElementById('div_et1.1.4').style.display = 'none' " >
           [x]</a>
        </div>
        <pre>
        et1.1.4: Traceback (most recent call last):
  File "test.py", line 20, in test_error
    self.assertEqual(a, 6)
NameError: name 'a' is not defined

        </pre>
    </div>
    <!--css div popup end-->
    </td>
    <td></td>
</tr>

<tr class='passClass'>
    <td>TestDemo2</td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
    <td>0</td>
    <td><a href="javascript:showClassDetail('c1.2',1)">Detail</a></td>
    <td>&nbsp;</td>
</tr>

<tr id='pt1.2.1' class='hiddenRow'>
    <td class='passCase'>
        <div class='testcase'>test_success</div>
    </td>
    <td style="color: #495057">
        <div></div>
    </td>
    <td style="color: #495057">
        <div>0.00 s</div>
    </td>
    <td colspan='5' align='center'>pass</td>
    <td></td>
</tr>

<tr class='failClass'>
    <td>TestDemo3</td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>0</td>
    <td>1</td>
    <td>0</td>
    <td><a href="javascript:showClassDetail('c1.3',1)">Detail</a></td>
    <td>&nbsp;</td>
</tr>

<tr id='ft1.3.1' class='none'>
    <td class='failCase'>
        <div class='testcase'>test_fail</div>
    </td>
    <td style="color: #495057">
        <div></div>
    </td>
    <td style="color: #495057">
        <div>0.00 s</div>
    </td>
    <td colspan='5' align='center'>
    <!--css div popup start-->
    <a class="popup_link" onfocus='this.blur();' href="javascript:showTestDetail('div_ft1.3.1')" >
        fail</a>
    <div id='div_ft1.3.1' class="popup_window">
        <div style='text-align: right; color:red;cursor:pointer'>
        <a onfocus='this.blur();' onclick="document.getElementById('div_ft1.3.1').style.display = 'none' " >
           [x]</a>
        </div>
        <pre>
        ft1.3.1: Traceback (most recent call last):
  File "test.py", line 32, in test_fail
    self.assertEqual(3, 4)
AssertionError: 3 != 4

        </pre>
    </div>
    <!--css div popup end-->
    </td>
    <td></td>
</tr>

                <tr id='total_row'>
                    <td>Total</td>
                    <td> </td>
                    <td> </td>
                    <td>5</td>
                    <td class="text text-success">2</td>
                    <td class="text text-danger">2</td>
                    <td class="text text-warning">1</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </div>
</div>

    <script src="https://cdn.bootcss.com/Chart.js/2.1.6/Chart.bundle.js"></script>
<script type="text/javascript">

    var data = {
        labels: [
            "passed",
            "failed",
            "errors",
            "skiped",
        ],
        datasets: [
            {
                data: [2, 2, 1, 1],
                backgroundColor: [
                    "#10c469",
                    "#f9c851",
                    "#ff5b5b",
                    "#98a6ad"
                ],
                hoverBackgroundColor: [
                    "#10c469",
                    "#f9c851",
                    "#ff5b5b",
                    "#98a6ad"
                ]
            }
        ]
    };
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        // options: options
    });

</script>

</div>

<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                2021 © 重定向科技 - http://itest.info
            </div>
            <div class="col-md-6">
                <div class="text-md-right footer-links d-none d-md-block">
                    <a href="https://github.com/SeldomQA/HTMLTestRunner">HTMLTestRunner</a>
                </div>
            </div>
        </div>
    </div>
</footer>

</body>

</html>